<!-- 柱状图 -->
<template>
  <div class="wrap">
    <el-card class="box-card" shadow='never' style="height:calc(50vh - 102px);border-radius:6px">
      <div>
        <div class="content" style="height:calc(50vh - 102px)">
          <div ref="barchart" id="barchart" :style="{ height: height, width: width }"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: '显示日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'calc(50vh - 102px)'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        // this.setOptions(val)
        if (!val || val?.series?.length === 0) {
          const dom = document.getElementById('barchart');
          dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
          dom.removeAttribute('_echarts_instance_');
        } else {
          this.setOptions(val)
        }
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    if (!this.chartData || this.chartData?.series?.length === 0) {
      const dom = document.getElementById('barchart');
      dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
      dom.removeAttribute('_echarts_instance_');
    } else {
      this.setOptions(this.chartData)
    }
  },
  methods: {
    setOptions(chartData) {
      this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
            // rotate: 40 // 如果 x 轴标签比较长，可以通过旋转来展示
          },
          data: chartData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: "item",
          backgroundColor: '#fff',
          textStyle: {
            color: '#000'
          }
        },
        series: [
          {
            data: chartData.series,
            type: 'bar',
            barWidth: 50,
            label: {
              show: true, // 显示标签
              position: 'top', // 标签位置
              color: '#188df0'
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      })
      this.myChart.off('click');
      this.myChart.on('click', (params) => {
        this.$emit('barclick', params.name, this.title)
      });
    }
  }
};
</script>
<style scoped>
.echarts_tip {
  position: absolute;
  border-radius: 5px;
  background: rgba(0, 0, 0, .5);
  padding: 10px 20px;
}

.wrap {
  height: calc(50vh - 40px);
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  padding: 10px 24px 14px;
  margin: 0 auto;
}

::v-deep .el-card {
  border: none;
}

.wrap .title {
  color: #459ffc;
  font-size: 16px;
}</style>